<script setup>
import { ref, isRef, unref, computed } from 'vue';
import { ElRow, ElCol } from 'element-plus';

const surname = ref('李');
console.log( isRef(surname), surname );
console.log( surname.value );
let lastName = unref(surname);
console.log( isRef(lastName), lastName, typeof lastName );

const name = ref('哪吒');
console.log( isRef(name), name );
console.log( name.value );
let firstName = unref(name);
console.log( isRef(firstName), firstName, typeof firstName );

const fullName = computed( () => surname.value + name.value );
console.log( fullName.value );

const fn = ref('悟空');
const ln = ref('孙');

const allName = computed({
    get: () => fn.value + '·' + ln.value,
    set: value => {
        console.log( fn.value, ln.value );
        let arr = value.split('·');
        console.log( arr );
        fn.value = arr[0];
        ln.value = arr[1];
        console.log( fn.value, ln.value );
    }
});

setTimeout( () => {
    console.log( fullName.value );
    fullName.value = '老王';
    console.log( fullName.value );

    allName.value = '尼古拉斯·凯奇';
}, 5000);
</script>

<template>
  <div>
    <el-row>
        <el-col :span="12">
            <input v-model="surname" placeholder="姓">
        </el-col>
        <el-col :span="12">
            <input v-model="name" placeholder="名">
        </el-col>
    </el-row>
    <p>通过计算属性获取的值: {{fullName}}</p>
    <el-row>
        <el-col :span="12">
            <input v-model="lastName" placeholder="姓">
        </el-col>
        <el-col :span="12">
            <input v-model="firstName" placeholder="名">
        </el-col>
    </el-row>
    <p>{{firstName}}·{{lastName}}</p>
    <h4>计算属性(computed)</h4>
    <p>{{allName}}</p>
  </div>
</template>